<template>
    <section class="integral-exchange-main base-main">
      <!--head-->
      <div class="head pr text-c">
        <span class="rule-icon flr pa fs12" @click="toJumpPage('integralRule')">
          <i class="pr iconfont iconwenhao"></i>
          积分规则
        </span>
        <p class="point">
          {{point}}<span>积分</span>
        </p>
        <p class="btn fs14">
          <span class="inline-block" @click="toJumpPage('integralSubsidiary')">积分明细</span>
          <span class="inline-block" @click="toJumpPage('integralRecord')">兑换记录</span>
        </p>
      </div>
      <!--head-->

      <!--任务-->
      <div class="integral-task-box mt10 bgcFFF">
        <div class="title-p fs16 text-c color45454D line-bottom">
          <img src="../../assets/img/icon_integral_title_l.png" alt="">
          积分任务
          <img src="../../assets/img/icon_integral_title_r.png" alt="">
        </div>
        <ul>
          <li class="pr">
            <img class="pa" src="../../assets/img/icon_sign_in.png" alt="">
            <div class="inline-block pr">
              <p class="caption color45454D fs15">
                每日签到
              </p>
              <p class="pop-text">
                连续签到最高可领10积分
              </p>
              <span class="btn-span btn-active pa text-c">
                签到
              </span>
            </div>
          </li>
          <li class="pr">
            <img class="pa" src="../../assets/img/icon_share.png" alt="">
            <div class="inline-block pr">
              <p class="caption color45454D fs15">
                分享得积分
              </p>
              <p class="pop-text">
                分享商品、资讯给好友得积分
              </p>
              <span class="btn-span pa text-c" @click="toJumpPage('recommend')">
                去分享
              </span>
            </div>
          </li>
          <li class="pr">
            <img class="pa" src="../../assets/img/icon_shopping.png" alt="">
            <div class="inline-block pr">
              <p class="caption color45454D fs15">
                购物得积分
              </p>
              <p class="pop-text">
                购买商品得大量积分
              </p>
              <span class="btn-span pa text-c" @click="toIndex">
                去购物
              </span>
            </div>
          </li>
        </ul>
      </div>
      <!--任务-->

      <!--banner-->
      <div class="banner mt10">
        <img src="https://f10.baidu.com/it/u=2987595138,4271236850&fm=72" alt="" @click="toJumpPage()">
      </div>
      <!--banner-->

      <!--兑换商品列表-->
      <div class="produc-list mt10 bgcFFF">
        <div class="title-p fs16 text-c color45454D line-bottom">
          <img src="../../assets/img/icon_integral_title_l.png" alt="">
          积分兑换
          <img src="../../assets/img/icon_integral_title_r.png" alt="">
        </div>

        <div class="list pdlr15">
          <IntegralProduct
            :productArr="productArr"
            @product-detail="productDetail"
            @conversion-id="conversionId"
          ></IntegralProduct>
        </div>
      </div>
      <!--兑换商品列表-->

    </section>
</template>

<script type="text/ecmascript-6">
  import IntegralProduct from '../../components/IntegralProduct.vue'

  export default {
    components:{
      IntegralProduct
    },
    data() {
      return {
        point:648,
        productArr:[
          {
            id:1,
            path:'',
            point:2000,
            surplus:240,
            surpluspercentage:10,
            name:'商品名称1111'
          },
          {
            id:2,
            path:'https://f10.baidu.com/it/u=2987595138,4271236850&fm=72',
            point:3000,
            surplus:240,
            surpluspercentage:30,
            name:'商品名称222'
          },
          {
            id:3,
            path:'https://f10.baidu.com/it/u=2987595138,4271236850&fm=72',
            point:4000,
            surplus:240,
            surpluspercentage:50,
            name:'商品名称333'
          },
          {
            id:4,
            path:'https://f10.baidu.com/it/u=2987595138,4271236850&fm=72',
            point:5000,
            surplus:240,
            surpluspercentage:80,
            name:'商品名称444'
          },
        ],
      }
    },
    methods: {
      toJumpPage(name){
        this.$router.push({
          path:'/index/web/' + name
        })
      },
      toIndex(){
        this.$router.push({path:'/index'})
      },
      productDetail(item){
        this.$router.push({
          path:'/index/web/productDetail',
          query:{id:item.id}
        })
      },
      conversionId(item){
        //此处还应该检查是否有默认地址
        this.$dialog.confirm({
          title: '确认兑换？',
          message: '按默认收货地址发货'
        }).then(() => {
          this.$toast('礼品兑换成功')
        }).catch(() => {
          // on cancel
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/integralExchange.scss";
</style>
